<template>
  <div>
    <el-row id="top" :span="12" type="flex" align="middle">
            <el-col :span="4">
              <el-input @keyup.enter.native="searchOne()" v-model="search" placeholder="请输入用户名"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" icon="el-icon-search" @click="searchOne()" size="small">搜索</el-button>
            </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <div style="height: 20px"></div>
    <el-table ref="multipleTable" :data="lenddetails" height="70vh" tooltip-effect="dark" style="width: 100%" border>
      <el-table-column prop="id" label="编号" align="center"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="itemid" label="器材编号" align="center"></el-table-column>
      <el-table-column prop="num" label="数量" align="center"></el-table-column>
      <el-table-column prop="applytime" label="申请时间" align="center"></el-table-column>
      <el-table-column prop="lendtime" label="借出时间" align="center"></el-table-column>
      <el-table-column prop="returntime" label="归还时间" align="center"></el-table-column>
      <el-table-column prop="state" label="状态" align="center"></el-table-column>
      <el-table-column width="150" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="changeLend(scope.$index, scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="deleteLend(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer :title="'编号' + lenddetail.id" :visible.sync="drawer" :direction="rtl" :before-close="handleClose">
      <div style="height:70px">

      </div>
      <el-form :model="lenddetail" label-width="80px" class="Lendform">
        <el-form-item label="用户名">
          <el-input v-model="lenddetail.username" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="器材编号">
          <el-input v-model="lenddetail.itemid" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="lenddetail.num" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker v-model="lenddetail.applytime" type="datetime" placeholder="选择日期时间" class="time">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="借出时间">
          <el-date-picker v-model="lenddetail.lendtime" type="datetime" placeholder="选择日期时间" class="time">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="归还时间">
          <el-date-picker v-model="lenddetail.returntime" type="datetime" placeholder="选择日期时间" class="time">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <div class="state">
            <div class="state_row">
              <div class="grid-content bg-purple">
                <el-radio v-model="lenddetail.state" label="未申请" border>未申请</el-radio>
              </div>
              <div class="grid-content bg-purple">
                <el-radio v-model="lenddetail.state" label="申请中" border>申请中</el-radio>
              </div>
            </div>
            <div class="state_row">
              <div class="grid-content bg-purple">
                <el-radio v-model="lenddetail.state" label="未归还" border>未归还</el-radio>
              </div>
              <div class="grid-content bg-purple">
                <el-radio v-model="lenddetail.state" label="归还中" border>归还中</el-radio>
              </div>
            </div>
            <div class="state_row">
              <div class="grid-content bg-purple">
                <el-radio v-model="lenddetail.state" label="已归还" border>已归还</el-radio>
              </div>
            </div>
          </div>
        </el-form-item>
        <div style="height:50px">

        </div>
        <span class="button">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="changeLendend">确 定</el-button>
        </span>
      </el-form>
    </el-drawer>
  </div>
</template>
<style>
.el-color-picker__icon,
.el-input,
.el-textarea {
  display: block;
}
</style>
<style scoped>
.button {
  width: 396px;
  margin: auto;
}

.button>button:last-child {
  margin-left: 100px;
}

.state {
  width: 230px;
  height: 150px;
}

.state_row {
  width: 230px;
  height: 50px;
}

.state_row>div {
  width: 115px;
  height: 50px;
  float: left;
}

.Lendform {
  width: 60%;
  margin: auto;
}

div/deep/.el-form-item__label {
  font-size: 16px !important;
}

div/deep/.Lendform .el-input__inner {
  font-size: 16px !important;
}

div/deep/.el-radio__label {
  font-size: 16px !important;
}

div/deep/.Lendform .el-button {
  font-size: 16px !important;
}

.time {
  margin-left: 0px;
  float: left;
}
</style>
<script>
export default {
  data() {
    return {
      changeState: ["未申请", "申请中", "未归还", "归还中", "已归还"],
      lenddetails: [
        {
          id: "",
          username: "",
          itemid: "",
          num: "",
          applytime: "",
          lendtime: "",
          returntime: "",
          state: "",
        },
      ],
      lenddetail: {
        id: "",
        username: "",
        itemid: "",
        num: "",
        applytime: "",
        lendtime: "",
        returntime: "",
        state: "",
      },
      accessVisable: false,
      drawer: false,
      search: '',
    };
  },

  created: function () {
    this.start();
  },
  mounted() {
    window.history.forward(1);
  },
  methods: {
    handleClose() {
      this.drawer = false;
      var d = new Date(this.lenddetail.applytime);
      this.lenddetail.applytime = d.getFullYear() + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2) + ":" + ("0" + d.getSeconds()).slice(-2);
      d = new Date(this.lenddetail.lendtime);
      this.lenddetail.lendtime = d.getFullYear() + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2) + ":" + ("0" + d.getSeconds()).slice(-2);
      d = new Date(this.lenddetail.returntime);
      this.lenddetail.returntime = d.getFullYear() + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2) + ":" + ("0" + d.getSeconds()).slice(-2);
    },
    start() {
      this.$axios.get("http://localhost:8085/selectALLlend").then((response) => {
        console.log(response.data);
        this.lenddetails = response.data;
        this.changeAll();
      });
    },
    changeLendend() {
      this.changeOneBack();
      var d = new Date(this.lenddetail.applytime);
      this.lenddetail.applytime = d.getFullYear() + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2) + ":" + ("0" + d.getSeconds()).slice(-2);
      d = new Date(this.lenddetail.lendtime);
      this.lenddetail.lendtime = d.getFullYear() + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2) + ":" + ("0" + d.getSeconds()).slice(-2);
      d = new Date(this.lenddetail.returntime);
      this.lenddetail.returntime = d.getFullYear() + "-" + ("0" + (d.getMonth() + 1)).slice(-2) + "-" + ("0" + d.getDate()).slice(-2) + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2) + ":" + ("0" + d.getSeconds()).slice(-2);
      this.$axios.post("http://localhost:8085/Updatelend", this.lenddetail).then((response) => {
        if (response.data) {
          this.$message.success("修改成功");
          this.start();
          this.drawer = false;
        }
      });
    },
    changeAll() {
      this.lenddetails.forEach(item => {
        item.state = this.changeState[Number(item.state)];
      })
    },
    changeOneBack() {
      this.lenddetail.state = String(this.changeState.indexOf(this.lenddetail.state));
      console.log(this.lenddetail);
    },
    changeLend(index, row) {
      this.lenddetail = row;
      this.drawer = true;
    },
    deleteLend(index, row) {
      if (confirm("是否删除")) {
        this.$axios.get("http://localhost:8085/deletelendByID?id=" + row.id).then((response) => {
          this.start();
          this.$message.success("删除成功");
        });
      }

    },
    searchOne() {
      if (this.search == '') {
        this.start();
      }
      else {
        this.$axios.get("http://localhost:8085/selectlendByUsername?username=" + this.search).then((response) => {
          console.log(response.data);
          this.lenddetails = response.data;
          this.changeAll();
        });
      }
    },
  },
};
</script>